<template>
    <section class="server_push_form">
        <p class="title"><span @click="goBack"><i class="el-icon-back"></i>服务资源注册</span></p>
		<el-form ref="form" :model="serverPushform" label-width="106px" >
			<el-form-item label="服务名称" required>
			    <el-input v-model="form.name"></el-input>
			</el-form-item>
			
			<el-form-item label="服务标识">
			    <span>由系统自动生成</span>
			</el-form-item>
			
			<el-form-item label="选择业务类别" required>
			   			<el-radio-group v-model="serverPushform.yewuType">
					      <el-radio-button class="box_radio" :label="item.id" :key="index"  v-for="(item,index) in yewuType" >{{item.name}}</el-radio-button>
					    </el-radio-group>
			</el-form-item>
			
			<el-form-item label="选择结果类型" required>
			   			<el-radio-group v-model="serverPushform.resultType" @change="searchServer">
					      <el-radio-button class="box_radio" :label="item.id" :key="index"  v-for="(item,index) in infoType" >{{item.name}}</el-radio-button>
					    </el-radio-group>
			</el-form-item>
			
			<el-form-item label="选择查询的资源 " required>
			   			<el-radio-group v-model="serverPushform.searchType" @change="changeSearchType">
					      <el-radio-button  class="box_radio" :label="item.id" :key="index"  v-for="(item,index) in searchType" >{{item.name}}</el-radio-button>
					    </el-radio-group>
			</el-form-item>
			
			<el-form-item :label="item.name " v-for="(item , index) in searchResult">
				<span>{{item.value}}</span>
			</el-form-item>
			
			<el-form-item label="服务返回方式 " required>
			  <el-radio v-if="showForm.shishiJiekou.show" @change="showBackType1" v-model="serverPushform.backType" label="1">实时接口</el-radio>
			  <el-radio v-if="showForm.wenjian.show" @change="showBackType2" v-model="serverPushform.backType" label="2">文件方式</el-radio>
			</el-form-item>
			
			<!--实时接口类型的-->
			<shishi-form  :outputData="outputData" :timeSubmit="shishiTimeSubmit"  @outPutForm = "shishiOutPutForm"  v-show="showBackType===1"></shishi-form>
			<!--文件方式类型的-->
			<wenjian-form :backData="outputData" :timeSubmit="wenjianTimeSubmit"  @outPutForm = "wenjianOutPutForm" :filePath="filePath" v-show="showBackType===2"></wenjian-form>
			
			<p class="dashed"></p>
			<span class="block">通用访问策略</span>			
			
			<el-form-item :label="item.label"  v-for="(item,index) in generalAccessPolicy">
				<span>{{item.value}}</span>
			</el-form-item>
			
			<p class="dashed"></p>
			<span class="block">特殊策略</span>	
			
			<special-cenue :timeSubmit="tongyongTimeSubmit"  @outPutForm = "tongyongOutPutForm"></special-cenue>
			
			<p class="dashed"></p>
			<span class="block">选择地区</span>
			
			<el-form-item label="发布到区域(多选)" required>
				<el-checkbox-group v-model="serverPushform.areaPush">
				     <el-checkbox-button
				     	v-for="(item , index) in areaPush"
				     	@mouseover.native="overShow()" @mouseout.native="outHide()" 
				     	style="width: 30%;" 
				     	class="box_checkbox" 
				     	:value="item.id"
				     	:label="item.id"
				     	 >{{item.name}}</el-checkbox-button>
				</el-checkbox-group>
			</el-form-item>
			
		<div class="three_bing" style="height: 205px;">
			<three-bing  v-show="showThreeBing" :idNames="idNames" ></three-bing>
		</div>
		
		<el-form-item label="服务的请求方">
					
						<el-popover
						  placement="right"
						  width="400"
						  v-model="everyAreaVisible"
						  trigger="click">
						 <el-checkbox-group v-model="everyArea">
						  <el-checkbox class="everyMonth_checkbox" style="width: 60px;margin:10px 0 0 30px;" v-for="(item,index) in everyAreaCheckBox" :value="item.id" :label="index" :key="index">{{item.name}}</el-checkbox>
							<p style="text-align: right;">							
								<el-button type="primary"  size="mini" @click="chooseEveryArea">确定</el-button>
							</p>
						 </el-checkbox-group>
						 <el-button slot="reference">
						 	 <span class="everyMonth_span" v-for="(item ,index) in serverPushform.requesterIdList" :key="index">
						 		<i class="el-icon-circle-close-outline"></i>
						 		{{everyAreaCheckBox[item].name}}
						 </span>
						 </el-button>
						</el-popover>
					
		</el-form-item>
		</el-form>


		<p style="text-align: center;">
			<el-button type="primary" @click="dealForm">确定</el-button>
			<el-button type="primary" plain @click="goBack">取消</el-button>
		</p>
    </section>
</template>

<script>
	import specialCenue from "./specialCenue"
    import shishiForm from "./shishiForm"
    import wenjianForm from "./wenjianForm"
    import threeBing from "./threeBing"
    import {
    	componentPushDetail,
    	componentSearchServer,
    	componentDealForm,
    	componentGetServerList,
    	componentServerPublic
    } from "./js_css_img/serverResourceComputed"
    export default {
    	props:{
    		id:Number,
    		treeSeach:Object,
    	},
    	components:{
    		shishiForm,
    		wenjianForm,
    		specialCenue,
    		threeBing
    	},
        data() {
          return {
          	wenjianTimeSubmit:false,
          	shishiTimeSubmit:false,
          	tongyongTimeSubmit:false,
          	filePath:'',
          	showForm:{
							shishiJiekou:{
								show:false,
								id:0
							},
							wenjian:{
								show:false,
								id:0
							},
          	},
          	everyAreaVisible:false,
          	everyArea:[],
          	idNames:[
          		"dd","ww","tt"
          	],
          	showThreeBing:false,
          	showBackType:0,
          	serverPushform:{
          		name:'',
          		yewuType:"",
          		resultType:'',
          		backType:'',
          		tuominName:'',
          		tuominCenter:'',
							requesterIdList:[],
          		wei:'',
          		areaPush:[],
          		everyArea:[],
          	},
          	form:{
				"id":0
				,"name":""
				,"nodeIds":""
				,"outFileType":""
				,accessTactics:{}
				,"outServiceDataSource":{
					"id":''
					,"type":''
				}
				,"requesterIdList":[]
				,"outputFieldViewList":[
				]
			},
          	everyAreaCheckBox:[
          		
          	],
          	areaPush:[
          	],
          	searchResult:[
          		{
          			name:'资源标识',
          			value:''
          		},
          		{
          			name:'服务方名称',
          			value:''
          		},
          		{
          			name:'服务方联系人',
          			value:''
          		},
          		{
          			name:'服务方联系方式',
          			value:''
          		},
          		{
          			name:'数据来源形式',
          			value:''
          		},
          		{
          			name:'资源描述',
          			value:''
          		},
          	],
          	yewuType:[],
          	generalAccessPolicy:[
          			{
          				label:'按频率控制',
          				value:'',
          			},
          			{
          				label:'按流量控制',
          				value:'',
          			},
          			{
          				label:'访问时间段',
          				value:'',
          			},
          	],
          	frequencyArray:["次/小时","次/天","次/月"],
          	flowArray:["M/小时","M/天","M/月"],
          	timeTpyeArray:["每天","每周","每月"],
          	infoType:[],
          	searchType:[],
          	outputData:[],
          };
        },
        methods: {
        		showBackType1(){
        			this.showBackType = 1;
        			this.form.outServiceDataSource.id=this.showForm.shishiJiekou.id;
        			this.form.outServiceDataSource.type=1;
        		},
        		showBackType2(){
        			this.showBackType = 2;
        			this.form.outServiceDataSource.id=this.showForm.wenjian.id;
        			this.form.outServiceDataSource.type=2;
        		},
        	  chooseEveryArea(){
        	    	
        			this.serverPushform.everyArea = this.everyArea;

        			this.serverPushform.requesterIdList = this.everyArea
        			this.everyAreaVisible=false;
        		},
        	   goBack(){
        			this.$emit('goBack');
        		},
        		changeSearchType(val){/*选择该服务*/
        			console.log(val);
        			componentPushDetail(this,{"id":val});
        			this.form.id = val;
        			
        		},
        		changeBackType(){
        			
        		},
        		overShow(){/*显示echarts*/
        			this.showThreeBing =true;
        			console.log('ww');
        		},
        		outHide(){/*不显示echarts*/
//      			this.showThreeBing =false;
        				console.log('r');
        		},
        		searchServer(val){/*搜索查询的资源*/
        			componentSearchServer(this,this.serverPushform.yewuType,val);
        		},
        		tongyongOutPutForm(val){/*通用策略的表单*/
        			console.log(val);
							if(val.flow===''&&val.frequency===''&&val.timeTpye===''){
								this.form.accessTactics =null;
							}else{
								this.form.accessTactics =val;
							}
							
							this.form.requesterIdList=[];
							for (let i in this.everyArea) {
								this.form.requesterIdList.push(this.everyAreaCheckBox[this.everyArea[i]].id)
							}
							
        			if(this.showBackType===1){
        				this.shishiTimeSubmit =!this.shishiTimeSubmit
        			}else if(this.showBackType===2){
        				this.wenjianTimeSubmit =!this.wenjianTimeSubmit
        			}
        		},
        		shishiOutPutForm(val){/*实时接口的表单*/
        			console.log(val);
        			this.form.outputFieldViewList=val;
        			componentServerPublic(this);
        			
        		},
        		wenjianOutPutForm(val){/*文件的表单*/
        			this.form.outFileType = val;
        			componentServerPublic(this);
        		},
        		dealForm(){
        			componentDealForm(this);
        		},
        		
        },
        watch:{
        	id(newVal){
        		console.log(newVal);
        		if(newVal!=0){
        			Object.assign(this.$data, this.$options.data())/*重置data数据*/
        			this.yewuType=this.treeSeach.business_type;
        			this.infoType=this.treeSeach.info_type;
        			componentGetServerList(this);
//      			this.resocureRadio = this.treeSeach.segment;
        		}
        	}
        }
  };
</script>

<style>
    .server_push_form .title{
    	height: 30px;
	    border-bottom: dashed 1px #afa4a4;
	    line-height: 20px;
	    font-size: 15px;
	    margin-bottom: 20px;
    }
    .server_push_form .title span{
    	cursor: pointer;
    	color: #5A8BFF;
    }
    .server_push_form .title .el-icon-back{
    	margin-right: 15px;
    }
    
    .server_push_form  .box_radio{
    	margin: 5px !important;
    }
    .server_push_form  .box_radio .el-radio-button__inner{
    	border:  1px solid #dcdfe6;
    }
    
  .server_push_form .el-radio-button__orig-radio:checked+.el-radio-button__inner{
  		color: #fff;
	    background-color: #409eff;
	    border-color: #409eff;
	    box-shadow: unset;
  }
    
  .server_push_form .second_form{
  	  	background: #f5f5f5;
  		padding: 20px;
  }
  
    .server_push_form  .dashed{
    border-bottom: dashed 1px #afa4a4;
  }
  
     .server_push_form  .block{
   	 font-size: 16px;
   	 margin-bottom: 10px;
    	display: inline-block;
    margin-top: 20px;
   }
   
   	.server_push_form  .box_checkbox{
    	margin: 5px !important;
    }
    .server_push_form  .box_checkbox .el-checkbox-button__inner{
    	border:  1px solid #dcdfe6;
    }
    
    
  /******************************************************************************/
   .server_push_form  .el-checkbox-button.is-checked .el-checkbox-button__inner{
	   	color: #fff;
	    background-color: #409eff;
	    border-color: #409eff;
	    box-shadow: -1px 0 0 0 #8cc5ff;
   }


/********************************************************************************/

  .server_push_form .everyMonth_span{
  	    position: relative;
    border: 1px solid #dcdfe6;
    padding: 5px;
    margin: 0 5px;
  }
  
  
  .server_push_form .everyMonth_span .el-icon-circle-close-outline{
  	    position: absolute;
    top: -5px;
    right: -5px;
  }
 .server_push_form .everyMonth_checkbox{
 	width:auto;
 	margin-left: 30px;
 }
  .server_push_form .everyMonth{
  	position: absolute;
    top: 115px;
    left: 100px;
  }
</style>